<template>
    <div id="backcont">
        <div class="meituan-content">
            <div class="login-cont">
                <div class="meituan-title">
                    MBTI人格测试登陆
                </div>

                <div class="meituan-user">
                    <p>账号</p>
                    <el-input v-model="account" class="inputflex" placeholder="请输入账号" />
                </div>

                <div class="meituan-user">
                    <p>密码</p>
                    <el-input v-model="password"  
                        class="inputflex"
                        type="password"
                        placeholder="请输入密码" 
                        show-password
                     />
                </div>
                <!--在文本框右下角设置一个名为regi的p标签，设置为可点击，点击后，regi的值由登录变成注册  -->
                <!-- <div class="reg-view" @click="regi = regi == '登录' ? '注册' : '登录'"><p>{{regi}}</p></div>       -->
                <!-- 这和上面正好相反，在这里定义了一个按钮，如果上面regi传的值是登录，下面按钮的值就是注册，对应按钮名称就是signin，反之则为登录，对应按钮名称为register -->
                <!-- <el-button v-if="regi == '注册' " @click = "signin" type="primary" :loading = "load" class = "meituan-btn">登录</el-button>
                <el-button v-else type="primary"  @click = "register" :loading = "load" class = "meituan-btn">注册</el-button> -->
                 <div class="reg-view" @click="regi"><p>{{"没账号？那就来注册一个吧！！"}}</p></div>
                <el-button @click = "signin" type="primary" :loading = "load" class = "meituan-btn">登录</el-button>
                </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance} from "vue";
import { useRouter } from 'vue-router'
//import axios from 'axios'
export default{
    setup(){
        const {proxy} = getCurrentInstance()
        const user = reactive({
            account:'',                                                                         //对应HTML中的账号
            password:'',                                                                        //对于HTML中的密码
            regi: '注册',
            load:false
        })
        const router = useRouter()
        const signin = async()=>{
            user.load = true                                                                    //load动画开启
            const obj = {sno:user.account,password:user.password}                           //定义用户账号和用户的密码
           if (user.account == 'admin') {
               if (user.password == 'admin') {
                    router.push({                                                                   //绑定路由
                    path: '/system'
                })
               }
           }
           else{
            try {
            const res = await new proxy.$request(proxy.$urls.m().login,obj).modepost()          //向这个网址发出post请求
            console.log(res)
            
             if(res.status != 200){                                                             //登陆失败警告
                new proxy.$tips(res.data.msg,'warning').mess_age()
            }else{
                //localStorage.setItem('token',res.data.data.token)
                var sno = user.account
                localStorage.setItem('account',sno)
                var cname = res.data.cname
                localStorage.setItem('cname',cname)
                var cno = res.data.cno
                localStorage.setItem('cno',cno)
                router.push({                                                                   //绑定路由
                    path: '/login'
                })
            }
            user.load = false
            } catch (e) {
                user.load = false
                new proxy.$tips("账号或密码错误",'error').mess_age()                            //服务器发生错误警告
            }
            }
            
            
        }

        const regi = async()=>{
                    router.push({                                                                   //绑定路由
                    path: '/register'
                })

        }
        return {...toRefs(user),signin,regi}
    }
}
</script>

<style>
.login-cont{
    width: 500px;
    height: 300px;
    background:#dbebf3;
    border-radius: 5px;
    opacity:80%
}
.meituan-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.meituan-title{
    text-align: center;
    color:  #000000;
    /* 字体大小 */
    font-size:30px;
    padding-top: 30px;
    /* 设置字体 */
    font-family: Arial, Helvetica, sans-serif;
}
.meituan-user{
    width:400px;
    margin: 0 auto;
    padding-top: 30px;
    height: 40px;
    display: flex;
    align-items: center;
}
.meituan-user p{
    width: 50px;
    font-size: 16px;
}
.inputflex{
    flex: 1;
}
.reg-view{
    width: 400px;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    padding-top: 10px;
}
.reg-view p{
    cursor: pointer;
    display: contents;
}
.meituan-btn{
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0 auto;
    font-size: 16px;
}
</style>